<!-- -->
<ion-content class="auth-page">
  <div class="scroll-content">

    <div class="login-content">
      <!-- Logo -->
      <div class="ion-padding ion-text-center">
        <div class="logo"></div>
        <ion-text class="text">
          <h2 class="text"><strong>{{ "SIGN_UP" | translation: language }}</strong></h2>
        </ion-text>
      </div>

      <!-- Register form -->
      <form class="list-form" [formGroup]="registerForm" (ngSubmit)="register()">
        <ion-item>
          <ion-label position="floating">
            <ion-icon name="person" slot="start" class="text"></ion-icon>
            {{ "first_Name" | translation: language }}
          </ion-label>
          <ion-input formControlName="firstName" type="text" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">
            <ion-icon name="person" slot="start" class="text"></ion-icon>
            {{ "last_name" | translation: language }}
          </ion-label>
          <ion-input formControlName="lastName" type="text" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">
            <ion-icon name="person" slot="start" class="text"></ion-icon>
            {{ "username" | translation: language }}
          </ion-label>
          <ion-input formControlName="username" type="text" required></ion-input>
        </ion-item>
        
        <ion-item>
          <ion-label position="floating">
            <ion-icon name="mail" slot="start" class="text"></ion-icon>
            {{ "email" | translation: language }}
          </ion-label>
          <ion-input formControlName="email" type="text" required></ion-input>
        </ion-item>

        <ion-item *ngIf="registerForm.get('email').errors && registerForm.get('email').dirty">
          <ion-text><p color="danger" *ngIf="registerForm.get('email').hasError('required')">Field is required</p></ion-text>
          <ion-text><p color="danger" *ngIf="registerForm.get('email').hasError('email')">It is not an email</p></ion-text>
        </ion-item>

        <ion-item>
          <ion-label position="floating">
            <ion-icon name="lock-closed" slot="start" class="text"></ion-icon>
            {{ "password" | translation: language }}
          </ion-label>
          <ion-input formControlName="password" type="password" required></ion-input>
        </ion-item>

        <ion-item *ngIf="registerForm.get('password').errors && registerForm.get('password').dirty">
          <ion-text><p color="danger" *ngIf="registerForm.get('password').hasError('required')">Field is required</p></ion-text>
          <ion-text><p color="danger" *ngIf="registerForm.get('password').hasError('pattern')">This password is too common.</p></ion-text>
          <ion-text><p color="danger" *ngIf="registerForm.get('password').hasError('pattern')">This password is completely numeric.</p></ion-text>
        </ion-item>

        <ion-item>
          <ion-label position="floating">
            <ion-icon name="lock-closed" slot="start" class="text"></ion-icon>
            {{ "Confirm_Password" | translation: language }}
          </ion-label>
          <ion-input formControlName="passwordConfirmation" type="password" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">
            <ion-icon name="phone-portrait-sharp" slot="start" class="text"></ion-icon>
            {{ "phone" | translation: language }}
          </ion-label>
          <ion-input formControlName="phone" type="text" required></ion-input>
        </ion-item>
      </form>

      <div class="ion-margin-top">
        <ion-button expand="block" color="dark" tappable (click)="register()" [disabled]="!registerForm.valid">
          {{ "SIGN_UP" | translation: language }}
        </ion-button>

        <ion-text class="text ion-text-center">
          <p class="text">{{ "Or_Sign_in_with" | translation: language }}</p>
        </ion-text>

        <ion-grid>
          <ion-row>
            <ion-col col-6>
              <ion-button expand="block" class="btn-facebook" (click)="LoginFacebook()">
                <ion-icon slot="icon-only" name="logo-facebook"></ion-icon>
              </ion-button>
            </ion-col>
            <ion-col col-6>
              <ion-button expand="block" class="btn-gplus" (click)="LoginGoogle()">
                <ion-icon slot="icon-only" name="logo-google"></ion-icon>
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>

      <!-- Other links -->
      <div class="ion-text-center ion-margin-vertical">
        <ion-text class="text">
          <span class="text" tappable routerLink="/login"> {{ "I_have_an_account" | translation: language }}</span>
        </ion-text>
      </div>

    </div>
  </div>
</ion-content>